import React, { useState, useEffect } from "react"
import { connect } from "react-redux"
import instance from "../../utils/instance"
import $ from "jquery"
import { actionCreator } from "../../page/Home/store"
import { getCookie } from "../../utils/cookie"
import "./Header.css"
import PutQuestion from "../PutQuestion/PutQuestion"

function Header(props) {
    const [topic, setTopic] = useState([])
    const [putQuestionActive, setPutQuestionActive] = useState(false)
    const [searchContent, setSearchContent] = useState("")
    useEffect(() => {
        instance.get("/topic?per_page=8&page=1").then(data => {
            if (data.data.errno === 0) {
                let info = data.data.data
                setTopic(info)
            }
        })
    }, [])
    useEffect(() => {
        let token = getCookie("token")
        if (token) {
            props.getUserInfo(token)
        } else {
            window.location.href = "#/"
        }
    }, [])
    useEffect(() => {
        document.onkeydown = function (e) {
            if ((e.keyCode || e.which) === 13) {
                searchQuestion()
            }
        }
    })

    const clickQuestion = (e) => {
        setPutQuestionActive(true)
    }

    const searchQuestion = (e) => {
        instance.get(`/question?q=${searchContent}`).then(data => {
            if (data.data.errno === 0) {
                let list = data.data.data
                list.length > 0 ? props.searchQuestion(list) : alert("当前查询将结果为空，请试试其他关键字查询!")
            }
        })
    }
    const selectTopicQuestion = (e) => {
        e.preventDefault()
        let topicId = $(e.target).data("id")
        instance.get(`/topic/${topicId}/questions`).then(data => {
            if (data.data.errno === 0) {
                let list = data.data.data
                list.length > 0 ? props.searchQuestion(list) : alert("当前话题下的问题数为0，赶紧去试试创建吧!")
            }
        })
    }

    return (
        <div className="header_container">
            {putQuestionActive && <PutQuestion closeThis={setPutQuestionActive} />}
            <div className="header-top">
                <div className="header_logo">
                    <h3>问答专区</h3>
                </div>
                <div className="header_nav">
                    <ul>
                        <li className="header_nav_active">
                            <a href="#/">首页</a>
                        </li>
                        <li>
                            <a href="#/">发现</a>
                        </li>
                        <li>
                            <a href="#/">等你来答</a>
                        </li>
                    </ul>
                </div>
                <div className="header_search">
                    <input type="text" id="header_search" placeholder="输入查询的内容...." onChange={(e) => { setSearchContent(e.target.value) }} />
                    <label className="iconfont iconsuosou" htmlFor="header_search" onClick={(e) => searchQuestion(e)}></label>
                </div>
                <div className="header_btn">
                    <input type="button" value="提问" onClick={(e) => { clickQuestion(e) }} />
                </div>
                <div className="header_prompt">
                    <span className="iconfont icontishi"></span>
                </div>
                <div className="header_user">
                    <p>欢迎您: <a href="#/user">{props.userInfo.username}</a></p>
                </div>
            </div>
            <div className="header-topic">
                <ul>
                    <li>
                        <a href="#/home" onClick={(e) => { setSearchContent(""); searchQuestion() }}>All</a>
                    </li>
                    {
                        topic.map(item => {
                            return (
                                <li key={item._id}>
                                    <a href="#/home" data-id={item._id} onClick={(e) => { selectTopicQuestion(e) }}>{item.name}</a>
                                </li>
                            )
                        })
                    }
                </ul>
            </div>
        </div>
    )
}

const mapStateToProps = (state) => {
    return {
        userInfo: state.home.userInfo
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        getUserInfo(token) {
            let action = actionCreator.getUser(token)
            dispatch(action)
        }
    }
}


export default connect(mapStateToProps, mapDispatchToProps)(Header)